<template>
  <el-card class="card-view" :style="{
    backgroundColor: randomColor(),
  }">
    <!-- shadow="always" -->
        <div id="myChart1" style="width: 466px; height: 252px"></div>
  </el-card>
</template>

<script>
import { request } from '@/api/service'
export default {
  sort: 6,
  title: '用户登录趋势',
  name: 'userLogin',
  icon: 'el-icon-s-data',
  description: '用户登陆',
  height: 28,
  width: 20,
  isResizable: true,
  props: {
  },
  watch: {
    data() {
      this.$nextTick(() => {
        this.drawLine();
      })
    }
  },
  data() {
    this.myChart1 = null
    return {
      data: [],
      radio: '7'

    }
  },
  methods: {
    initGet() {
      request({
        url: '/api/risk/area_industry_counts'
      }).then((res) => {
        this.data = res.data
      })
    },
    // 生成一个随机整数
    randomColor() {
      const color = ['#fffff']
      const ran = Math.floor(Math.random() * 4)
      return color[ran]
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      this.myChart1 = this.$echarts.init(document.getElementById('myChart1'))
      console.log(123, this.data.area_counts_1)
      const data1 = this.data.area_counts_1.map(item => { return { "name": item["辖区"], "value": item.count } })
      //const seriesData = this.data.map(item => item.count)

      const option = {
        title: {
          text: '服装企业数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: '企业数量',
            type: 'pie',
            radius: '50%',
            data: data1,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      this.myChart1.setOption(option)
    }
  },
  mounted() {
    this.initGet()
  }
}
</script>

<style scoped lang="scss">
.card-view {
  //border-radius: 10px;
  color: $color-primary;
}

.el-card {
  height: 100%;
}

::v-deep .el-card__body {
  width: 100%;
  height: 100%;
}

.el-radio-button__inner {
  border-radius: 20px;
}
</style>
